<!--
 * @FileDescription 操作菜单
 * @Author lz
 * @Date 20230615 09:27:40
 * @LastEditors lz
 * @LastEditTime 20230615 09:27:40
-->
<template>
  <div v-if="HomeContent.Default.vehicleControl.value.length > 0">
    <div
      class="Operations_wp"
      v-if="state.types"
      @mouseenter="mouseenter"
      @mouseleave="mouseleave"
    >
      <div class="oper_tit">
        <img src="/images/ic_menu_收起.png" class="retract_ico" @click="switchBtn" />
        <span class="tit">操作菜单</span>
      </div>
      <div
        class="munuList"
        v-for="(item, index) in HomeContent.Default.vehicleControl.value"
        :key="index"
        :class="state.current == item.Id ? 'current' : ''"
        @click="cur_btn(item.Id)"
      >
        <img :src="`/images/ic_${item.Name}_nromal.png`" class="menu_ico" />
        <span>{{ item.Name }}</span>
      </div>
    </div>
    <div class="expand_wp" v-else>
      <div class="oper_tit">
        <img src="/images/ic_menu_展开.png" class="retract_ico" @click="switchBtn" />
        <span class="tit">展开</span>
      </div>
      <div
        class="ex_munuList"
        v-for="(item, index) in HomeContent.Default.vehicleControl.value"
        :key="index"
        :class="state.current == item.Id ? 'current' : ''"
        @click="cur_btn(item.Id)"
      >
        <img :src="`/images/ic_${item.Name}_nromal.png`" class="ex_menu_ico" />
      </div>
    </div>
    <div
      class="VehicleControl"
      v-drag.offset.clamp
      v-if="state.current == 1"
      @mouseenter="mouseenter"
      @mouseleave="mouseleave"
    >
      <div class="veh_tit" drag-trigger>
        <span> 车辆控制 </span>
        <close-outlined class="ico_close" @click="close_btn" />
      </div>
      <div class="veh_content">
        <div
          class="buttonStart be er"
          @click="YJQD"
          :class="
            statComponen.Default.StatusConfigs.value.get(
              ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_START
            ) == 'Selected'
              ? 'Selected'
              : ' '
          "
        >
          <img
            src="/images/ic_一键启动_gray.png"
            class="veh_ico"
            v-if="
              statComponen.Default.StatusConfigs.value.get(
                ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_START
              ) == 'OFF' ||
              statComponen.Default.StatusConfigs.value.get(
                ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_START
              ) == 'ACC'
            "
          />
          <img
            src="/images/ic_一键启动_yellow.png"
            class="veh_ico"
            v-if="
              statComponen.Default.StatusConfigs.value.get(
                ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_START
              ) == 'ON' ||
              statComponen.Default.StatusConfigs.value.get(
                ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_START
              ) == 'VERIFY'
            "
          />
          <img
            src="/images/ic_一键启动_green.png"
            class="veh_ico"
            v-if="
              statComponen.Default.StatusConfigs.value.get(
                ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_START
              ) == 'START'
            "
          />
          <p class="veh_txt">一键启动</p>
        </div>
        <div
          class="parking be er"
          @click="DZZC"
          :class="
            statComponen.Default.StatusConfigs.value.get(
              ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_PARKING
            ) == 'Selected'
              ? 'Selected'
              : ' '
          "
        >
          <img
            src="/images/ic_电子驻车.png"
            class="veh_ico"
            v-if="
              statComponen.Default.StatusConfigs.value.get(
                ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_PARKING
              ) == 'Activated'
            "
          />
          <img src="/images/ic_电子驻车_red.png" class="veh_ico" v-else />
          <p class="veh_txt">电子驻车</p>
        </div>
        <div class="shift be">
          <div class="s_l">
            <img src="/images/ic_换档杆.png" class="veh_ico" />
            <p class="veh_txt">换档杆</p>
          </div>
          <div class="s_r">
            <img
              src="/images/ic_P_select.png"
              @click="GearBtn('P')"
              v-if="
                statComponen.Default.StatusConfigs.value.get(
                  ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_Gears
                ) == 'P'
              "
              class="shs_img"
            />
            <img
              src="/images/ic_P_normal.png"
              @click="GearBtn('P')"
              v-else
              class="shs_img"
            />
            <img
              src="/images/ic_N_select.png"
              @click="GearBtn('N')"
              v-if="
                statComponen.Default.StatusConfigs.value.get(
                  ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_Gears
                ) == 'N'
              "
              class="shs_img"
            />
            <img
              src="/images/ic_N_normal.png"
              @click="GearBtn('N')"
              v-else
              class="shs_img"
            />
            <img
              src="/images/ic_D_select.png"
              @click="GearBtn('D')"
              v-if="
                statComponen.Default.StatusConfigs.value.get(
                  ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_Gears
                ) == 'D'
              "
              class="shs_img"
            />
            <img
              src="/images/ic_D_normal.png"
              @click="GearBtn('D')"
              v-else
              class="shs_img"
            />
            <img
              src="/images/ic_R_select.png"
              @click="GearBtn('R')"
              v-if="
                statComponen.Default.StatusConfigs.value.get(
                  ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_Gears
                ) == 'R'
              "
              class="shs_img"
            />
            <img
              src="/images/ic_R_normal.png"
              @click="GearBtn('R')"
              v-else
              class="shs_img"
            />
            <!-- <span class="shs"
                        :class="statComponen.Default.StatusConfigs.value.get(ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_Gears) == 'P' ? 'currShs' : ''"
                        @click="GearBtn('P')">P</span>
                    <span class="shs"
                        :class="statComponen.Default.StatusConfigs.value.get(ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_Gears) == 'N' ? 'currShs' : ''"
                        @click="GearBtn('N')">N</span>
                    <span class="shs"
                        :class="statComponen.Default.StatusConfigs.value.get(ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_Gears) == 'D' ? 'currShs' : ''"
                        @click="GearBtn('D')">D</span>
                    <span class="shs"
                        :class="statComponen.Default.StatusConfigs.value.get(ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_Gears) == 'R' ? 'currShs' : ''"
                        @click="GearBtn('R')">R</span> -->
            <p
              class="veh_txt"
              v-if="
                statComponen.Default.StatusConfigs.value.get(
                  ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_Gears
                ) == 'P'
              "
            >
              驻车档
            </p>
            <p
              class="veh_txt"
              v-if="
                statComponen.Default.StatusConfigs.value.get(
                  ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_Gears
                ) == 'N'
              "
            >
              空档
            </p>
            <p
              class="veh_txt"
              v-if="
                statComponen.Default.StatusConfigs.value.get(
                  ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_Gears
                ) == 'D'
              "
            >
              前进档
            </p>
            <p
              class="veh_txt"
              v-if="
                statComponen.Default.StatusConfigs.value.get(
                  ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_Gears
                ) == 'R'
              "
            >
              倒档
            </p>
          </div>
        </div>
        <div class="shift be Acc">
          <div class="s_l">
            <img src="/images/ic_加速踏板.png" class="veh_ico" />
            <p class="veh_txt">加速踏板</p>
          </div>
          <div class="s_r">
            <img src="/images/bg_line.png" class="bg_line" />
            <a-slider
              id="test"
              v-model:value="HomeContent.Default.ACCELERATOR_PEDAL.value"
              class="sliderOne"
              @change="v1change"
            />
          </div>
          <p class="zero">0</p>
          <p class="one">100</p>
        </div>
        <div class="shift be brake">
          <div class="s_l">
            <img src="/images/ic_制动踏板.png" class="veh_ico" />
            <p class="veh_txt">制动踏板</p>
          </div>
          <div class="s_r">
            <img src="/images/bg_line.png" class="bg_line" />
            <a-slider
              id="test"
              v-model:value="HomeContent.Default.BRAKE_PEDAL.value"
              class="sliderTwo"
              @change="v2change"
            />
          </div>
          <p class="zero">0</p>
          <p class="one">100</p>
        </div>
        <div class="shift be steering">
          <div class="s_l">
            <div class="swh" @mousedown="horn('Press')" @mouseup="horn('Release')"></div>
            <p class="veh_txt">方向盘/喇叭</p>
          </div>
          <div class="s_r">
            <!-- <a-slider
              id="test"
              :min="-540"
              :max="540"
              @change="v3change"
              v-model:value="HomeContent.Default.STEERING_WHEEL.value"
              class="sliderThree"
            /> -->
            <a-slider
              id="test"
              :min="-540"
              :max="540"
              @change="v3change"
              v-model:value="steeringWheel"
              class="sliderThree"
            />
            <!-- <img src="/images/bt_喇叭.png" class="horn" > -->
          </div>
          <p class="wubaisi">-540°</p>
          <p class="one">540°</p>
        </div>
      </div>
    </div>
    <div
      class="WindowControl"
      v-drag.offset.clamp
      v-if="state.current == 2"
      @mouseenter="mouseenter"
      @mouseleave="mouseleave"
    >
      <div class="veh_tit" drag-trigger>
        <span> 车窗控制 </span>
        <close-outlined class="ico_close" @click="close_btn" />
      </div>
      <div class="tabBox">
        <div
          class="tab_li"
          :class="state.tabTypes == 0 ? 'tab_sele' : ''"
          @click="TabBtn(0)"
        >
          驾驶员车窗
        </div>
        <div
          class="tab_li"
          :class="state.tabTypes == 1 ? 'tab_sele' : ''"
          @click="TabBtn(1)"
        >
          乘客车窗
        </div>
      </div>
      <div class="winConBox" v-if="state.tabTypes == 0">
        <div class="WindowControlBox">
          <div
            class="upArrow"
            @mousedown="ArrowClick('UL')"
            @mouseup="ArrowRelease('UL')"
            @mouseleave="ArrowRelease('UL')"
          ></div>
          <img src="/images/ic_左前车窗.png" class="carWindow" />
          <div
            class="downArrow"
            @mousedown="ArrowClick('DL')"
            @mouseup="ArrowRelease('DL')"
            @mouseleave="ArrowRelease('DL')"
          ></div>
          <span>左前车窗</span>
        </div>
        <div class="WindowControlBox">
          <div
            class="upArrow"
            @mousedown="ArrowClick('UR')"
            @mouseup="ArrowRelease('UR')"
            @mouseleave="ArrowRelease('UR')"
          ></div>
          <img src="/images/ic_右前车窗.png" class="carWindow" />
          <div
            class="downArrow"
            @mousedown="ArrowClick('DR')"
            @mouseup="ArrowRelease('DR')"
            @mouseleave="ArrowRelease('DR')"
          ></div>
          <span>右前车窗</span>
        </div>
        <div class="WindowControlBox">
          <div
            class="upArrow"
            @mousedown="ArrowClick('AUL')"
            @mouseup="ArrowRelease('AUL')"
            @mouseleave="ArrowRelease('AUL')"
          ></div>
          <img src="/images/ic_左前车窗.png" class="carWindow" />
          <div
            class="downArrow"
            @mousedown="ArrowClick('ADL')"
            @mouseup="ArrowRelease('ADL')"
            @mouseleave="ArrowRelease('ADL')"
          ></div>
          <span>左后车窗</span>
        </div>
        <div class="WindowControlBox">
          <div
            class="upArrow"
            @mousedown="ArrowClick('AUR')"
            @mouseup="ArrowRelease('AUR')"
            @mouseleave="ArrowRelease('AUR')"
          ></div>
          <img src="/images/ic_右前车窗.png" class="carWindow" />
          <div
            class="downArrow"
            @mousedown="ArrowClick('ADR')"
            @mouseup="ArrowRelease('ADR')"
            @mouseleave="ArrowRelease('ADR')"
          ></div>
          <span>右后车窗</span>
        </div>
        <div
          class="windowLock er"
          @click="carWindowLock"
          :class="
            statComponen.Default.StatusConfigs.value.get(
              ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LOCK_CAR_WINDOW
            ) == 'Selected'
              ? 'Selected'
              : ' '
          "
        >
          <img src="/images/ic_车窗锁_off.png" class="lock_ico" />
          <p>车窗锁</p>
        </div>
      </div>
      <div class="winConBox" v-if="state.tabTypes == 1">
        <div class="WindowControlBox bgNone"></div>
        <div class="WindowControlBox">
          <div
            class="upArrow"
            @mousedown="ArrowClick('PUR')"
            @mouseup="ArrowRelease('PUR')"
            @mouseleave="ArrowRelease('PUR')"
          ></div>
          <img src="/images/ic_右前车窗.png" class="carWindow" />
          <div
            class="downArrow"
            @mousedown="ArrowClick('PDR')"
            @mouseup="ArrowRelease('PDR')"
            @mouseleave="ArrowRelease('PDR')"
          ></div>
          <span>右前车窗</span>
        </div>
        <div class="WindowControlBox">
          <div
            class="upArrow"
            @mousedown="ArrowClick('PAUL')"
            @mouseup="ArrowRelease('PAUL')"
            @mouseleave="ArrowRelease('PAUL')"
          ></div>
          <img src="/images/ic_左前车窗.png" class="carWindow" />
          <div
            class="downArrow"
            @mousedown="ArrowClick('PADL')"
            @mouseup="ArrowRelease('PADL')"
            @mouseleave="ArrowRelease('PADL')"
          ></div>
          <span>左后车窗</span>
        </div>
        <div class="WindowControlBox">
          <div
            class="upArrow"
            @mousedown="ArrowClick('PAUR')"
            @mouseup="ArrowRelease('PAUR')"
            @mouseleave="ArrowRelease('PAUR')"
          ></div>
          <img src="/images/ic_右前车窗.png" class="carWindow" />
          <div
            class="downArrow"
            @mousedown="ArrowClick('PADR')"
            @mouseup="ArrowRelease('PADR')"
            @mouseleave="ArrowRelease('PADR')"
          ></div>
          <span>右后车窗</span>
        </div>
      </div>
    </div>
    <div
      class="RearviewMirrorControl"
      v-drag.offset.clamp
      v-if="state.current == 3"
      @mouseenter="mouseenter"
      @mouseleave="mouseleave"
    >
      <div class="veh_tit" drag-trigger>
        <span> 后视镜控制 </span>
        <close-outlined class="ico_close longo" @click="close_btn" />
      </div>
      <div class="RearViewContent">
        <div class="RVC">
          <div
            class="RVCBox"
            @click="leftMirror"
            :class="
              statComponen.Default.StatusConfigs.value.get(
                ObjectControllerCode.Default.MsgCodesList
                  .APPEARENCE_UI_REARVIEW_MIRROR_ACTIVATE_LEFT
              ) == 'Selected'
                ? 'edge'
                : ' '
            "
          >
            <img src="/images/ic_后视镜_left.png" class="rcv_ico" />
            <p class="veh_txt">左侧</p>
          </div>
          <div
            class="RVCBox"
            @click="offMirror"
            :class="
              statComponen.Default.StatusConfigs.value.get(
                ObjectControllerCode.Default.MsgCodesList
                  .APPEARENCE_UI_REARVIEW_MIRROR_ACTIVATE_OFF
              ) == 'Selected'
                ? 'edge'
                : ' '
            "
          >
            <p class="off">0</p>
            <p class="veh_txt">OFF</p>
          </div>
          <div
            class="RVCBox"
            @click="rightMirror"
            :class="
              statComponen.Default.StatusConfigs.value.get(
                ObjectControllerCode.Default.MsgCodesList
                  .APPEARENCE_UI_REARVIEW_MIRROR_ACTIVATE_RIGHT
              ) == 'Selected'
                ? 'edge'
                : ' '
            "
          >
            <img src="/images/ic_后视镜_right.png" class="rcv_ico" />
            <p class="veh_txt">右侧</p>
          </div>
        </div>

        <div class="OperationPanel">
          <img src="/images/ic_direction_bg.png" class="OP_ico" />
          <img
            src="/images/ic_direction_up.png"
            class="seta_t"
            @mousedown="mirrorClick('MU')"
            @mouseup="mirrorRelease('MU')"
            @mouseleave="mirrorRelease('MU')"
          />
          <img
            src="/images/ic_direction_down.png"
            class="seta_t setab"
            @mousedown="mirrorClick('MD')"
            @mouseup="mirrorRelease('MD')"
            @mouseleave="mirrorRelease('MD')"
          />
          <img
            src="/images/ic_direction_left.png"
            class="seta_t setal"
            @mousedown="mirrorClick('ML')"
            @mouseup="mirrorRelease('ML')"
            @mouseleave="mirrorRelease('ML')"
          />
          <img
            src="/images/ic_direction_right.png"
            class="seta_t setar"
            @mousedown="mirrorClick('MR')"
            @mouseup="mirrorRelease('MR')"
            @mouseleave="mirrorRelease('MR')"
          />
        </div>
        <div
          class="aquecimentoBox er"
          @click="heatMirror"
          :class="
            statComponen.Default.StatusConfigs.value.get(
              ObjectControllerCode.Default.MsgCodesList
                .APPEARENCE_UI_REARVIEW_MIRROR_HEATER
            ) == 'Selected'
              ? 'Selected'
              : ' '
          "
        >
          <img src="/images/ic_加热.png" class="er_ico" />
          <p class="veh_txt">加热</p>
        </div>
        <div
          class="ColapsoBox er"
          @click="foldMirror"
          :class="
            statComponen.Default.StatusConfigs.value.get(
              ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_REARVIEW_MIRROR_FOLD
            ) == 'Selected'
              ? 'Selected'
              : ' '
          "
        >
          <img src="/images/ic_折叠.png" class="er_ico" />
          <p class="veh_txt">折叠</p>
        </div>
      </div>
    </div>
    <div
      class="WiperControl"
      v-drag.offset.clamp
      v-if="state.current == 4"
      @mouseenter="mouseenter"
      @mouseleave="mouseleave"
    >
      <div class="veh_tit" drag-trigger>
        <span> 雨刮控制 </span>
        <close-outlined class="ico_close" @click="close_btn" />
      </div>
      <div
        class="LimpadorList ml_20"
        @click="WiperOnce"
        :class="
          statComponen.Default.StatusConfigs.value.get(
            ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_WIPER_FRONT_ONCE
          ) == 'Selected'
            ? 'Selected'
            : ' '
        "
      >
        <img src="/images/ic_雨刮_1x.png" class="Lim_ico" />
        <p class="veh_txt">1x</p>
      </div>
      <div
        class="LimpadorList"
        @click="WiperOFF"
        :class="
          statComponen.Default.StatusConfigs.value.get(
            ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_WIPER_FRONT_CLSOE
          ) == 'Selected'
            ? 'Selected'
            : ' '
        "
      >
        <img src="/images/ic_雨刮_off.png" class="Lim_ico" />
        <p class="veh_txt">OFF</p>
      </div>
      <div
        class="LimpadorList"
        @click="WiperINT"
        :class="
          statComponen.Default.StatusConfigs.value.get(
            ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_WIPER_FRONT_INTERVAL
          ) == 'Selected'
            ? 'Selected'
            : ' '
        "
      >
        <img src="/images/ic_雨刮_int.png" class="Lim_ico" />
        <p class="veh_txt">INT</p>
      </div>
      <div
        class="LimpadorList ml_20"
        @click="WiperLOW"
        :class="
          statComponen.Default.StatusConfigs.value.get(
            ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_WIPER_FRONT_LOW
          ) == 'Selected'
            ? 'Selected'
            : ' '
        "
      >
        <img src="/images/ic_雨刮_LOW.png" class="Lim_ico" />
        <p class="veh_txt">LOW</p>
      </div>
      <div
        class="LimpadorList"
        @click="WiperHIGH"
        :class="
          statComponen.Default.StatusConfigs.value.get(
            ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_WIPER_FRONT_HIGHT
          ) == 'Selected'
            ? 'Selected'
            : ' '
        "
      >
        <img src="/images/ic_雨刮_HIGH.png" class="Lim_ico" />
        <p class="veh_txt">HIGH</p>
      </div>
      <div
        class="LimpadorList"
        @mousedown="waterSpray('open')"
        @mouseup="waterSpray('close')"
        :class="
          statComponen.Default.StatusConfigs.value.get(
            ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_WIPER_FRONT_SPRAY
          ) == 'Selected'
            ? 'Selected'
            : ' '
        "
      >
        <img src="/images/ic_雨刮_ps.png" class="Lim_ico" />
        <p class="veh_txt">喷水</p>
      </div>
    </div>
    <div
      class="lightingControl"
      v-drag.offset.clamp
      v-if="state.current == 5"
      @mouseenter="mouseenter"
      @mouseleave="mouseleave"
    >
      <div class="veh_tit" drag-trigger>
        <span> 灯光控制 </span>
        <close-outlined class="ico_close" @click="close_btn" />
      </div>
      <div class="tabBox">
        <div
          class="Linetab_li"
          :class="state.LinetabTypes == 0 ? 'tab_sele' : ''"
          @click="LineTabBtn(0)"
        >
          灯光开关
        </div>
        <div
          class="Linetab_li"
          :class="state.LinetabTypes == 1 ? 'tab_sele' : ''"
          @click="LineTabBtn(1)"
        >
          灯光组合开关
        </div>
        <!-- <div class="Linetab_li" :class="state.LinetabTypes == 2 ? 'tab_sele' : ''" @click="LineTabBtn(2)">
                阅读灯开关
            </div> -->
      </div>
      <div class="winConBox" v-if="state.LinetabTypes == 1">
        <div
          class="LightBox"
          @click="highBeam"
          v-if="
            statComponen.Default.StatusConfigs.value.get(
              ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_HEAD_DISTANCE
            ) != 'Disabled'
          "
          :class="
            statComponen.Default.StatusConfigs.value.get(
              ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_HEAD_DISTANCE
            ) == 'Selected'
              ? 'Selected'
              : ' '
          "
        >
          <img src="/images/ic_远光灯.png" class="li_ico" />
          <p class="veh_txt">远光灯</p>
        </div>
        <div
          class="LightBox"
          @click="LowBeam"
          v-if="
            statComponen.Default.StatusConfigs.value.get(
              ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_HEAD_NEAR
            ) != 'Disabled'
          "
          :class="
            statComponen.Default.StatusConfigs.value.get(
              ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_HEAD_NEAR
            ) == 'Selected'
              ? 'Selected'
              : ' '
          "
        >
          <img src="/images/ic_近光灯.png" class="li_ico" />
          <p class="veh_txt">近光灯</p>
        </div>
        <div
          class="LightBox"
          @mousedown="flashLight('Press')"
          @mouseup="flashLight('Release')"
          v-if="
            statComponen.Default.StatusConfigs.value.get(
              ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_HEAD_FLASH
            ) != 'Disabled'
          "
          :class="
            statComponen.Default.StatusConfigs.value.get(
              ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_HEAD_FLASH
            ) == 'Selected'
              ? 'Selected'
              : ' '
          "
        >
          <img src="/images/ic_远光灯_1x.png" class="li_ico" />
          <p class="veh_txt">1x</p>
        </div>
        <div
          class="LighBox_B"
          @click="LEFT"
          v-if="
            statComponen.Default.StatusConfigs.value.get(
              ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_TURN_LEFT
            ) != 'Disabled'
          "
          :class="
            statComponen.Default.StatusConfigs.value.get(
              ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_TURN_LEFT
            ) == 'Selected'
              ? 'Selected'
              : ' '
          "
        >
          <img src="/images/ic_左转向灯.png" class="li_ico" />
          <p class="veh_txt">左转向灯</p>
        </div>
        <div
          class="LighBox_B"
          @click="RightTurn"
          v-if="
            statComponen.Default.StatusConfigs.value.get(
              ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_TURN_RIGHT
            ) != 'Disabled'
          "
          :class="
            statComponen.Default.StatusConfigs.value.get(
              ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_TURN_RIGHT
            ) == 'Selected'
              ? 'Selected'
              : ' '
          "
        >
          <img src="/images/ic_右转向灯.png" class="li_ico" />
          <p class="veh_txt">右转向灯</p>
        </div>
      </div>
      <div class="winConBox" v-if="state.LinetabTypes == 0">
        <div
          class="LighBox_B"
          @click="offmatic"
          v-if="
            statComponen.Default.StatusConfigs.value.get(
              ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_OFF
            ) != 'Disabled'
          "
          :class="
            statComponen.Default.StatusConfigs.value.get(
              ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_OFF
            ) == 'Selected'
              ? 'Selected'
              : ' '
          "
        >
          <img src="/images/ic_大灯常闭.png" class="li_ico" />
          <p class="veh_txt">关闭灯光</p>
        </div>
        <div
          class="LighBox_B"
          @click="automatic"
          v-if="
            statComponen.Default.StatusConfigs.value.get(
              ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_AUTO
            ) != 'Disabled'
          "
          :class="
            statComponen.Default.StatusConfigs.value.get(
              ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_AUTO
            ) == 'Selected'
              ? 'Selected'
              : ' '
          "
        >
          <img src="/images/ic_AUTO.png" class="li_ico" />
          <p class="veh_txt">自动大灯</p>
        </div>
        <div
          class="LighBox_B"
          @click="led"
          v-if="
            statComponen.Default.StatusConfigs.value.get(
              ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_LAMPLET_SWITCH
            ) != 'Disabled'
          "
          :class="
            statComponen.Default.StatusConfigs.value.get(
              ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_LAMPLET_SWITCH
            ) == 'Selected'
              ? 'Selected'
              : ' '
          "
        >
          <img src="/images/ic_示宽灯.png" class="li_ico" />
          <p class="veh_txt">示宽灯</p>
        </div>
        <div
          class="LighBox_B"
          @click="headlight"
          v-if="
            statComponen.Default.StatusConfigs.value.get(
              ObjectControllerCode.Default.MsgCodesList
                .APPEARENCE_UI_LIGHT_HEADLAMP_SWITCH
            ) != 'Disabled'
          "
          :class="
            statComponen.Default.StatusConfigs.value.get(
              ObjectControllerCode.Default.MsgCodesList
                .APPEARENCE_UI_LIGHT_HEADLAMP_SWITCH
            ) == 'Selected'
              ? 'Selected'
              : ' '
          "
        >
          <img src="/images/ic_大灯.png" class="li_ico" />
          <p class="veh_txt">大灯</p>
        </div>
        <div
          class="LighBox_B"
          @click="fogLamp"
          v-if="
            statComponen.Default.StatusConfigs.value.get(
              ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_FRONT_FOG
            ) != 'Disabled'
          "
          :class="
            statComponen.Default.StatusConfigs.value.get(
              ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_FRONT_FOG
            ) == 'Selected'
              ? 'Selected'
              : ' '
          "
        >
          <img src="/images/ic_前雾灯.png" class="li_ico" />
          <p class="veh_txt">前雾灯</p>
        </div>
        <div
          class="LighBox_B"
          @click="RearFogLights"
          v-if="
            statComponen.Default.StatusConfigs.value.get(
              ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_REAR_FOG
            ) != 'Disabled'
          "
          :class="
            statComponen.Default.StatusConfigs.value.get(
              ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_LIGHT_REAR_FOG
            ) == 'Selected'
              ? 'Selected'
              : ' '
          "
        >
          <img src="/images/ic_后雾灯.png" class="li_ico" />
          <p class="veh_txt">后雾灯</p>
        </div>
      </div>
      <div class="winConBox" v-if="state.LinetabTypes == 999">
        <!-- <div class="LighBox_B">
                <img src="/images/ic_向上.png" class="li_ico">
                <p class="veh_txt">向上</p>

            </div>
            <div class="LighBox_B">
                <img src="/images/ic_向下.png" class="li_ico">
                <p class="veh_txt">向下</p>
            </div> -->
        <div class="LighBox_B">
          <img src="/images/ic_迎宾灯.png" class="li_ico" />
          <p class="veh_txt">迎宾灯</p>
        </div>
        <!-- <div class="SunroofSwitch"> -->
        <!-- <img src="/images/ic_天窗开关.png" class="sun_ico">
                <p class="veh_txt">天窗开关</p> -->
        <!-- </div> -->
        <div class="LighBox_B">
          <img src="/images/ic_车内灯光开关.png" class="li_ico" />
          <p class="veh_txt">车内灯光开关</p>
        </div>
        <div class="LighBox_B">
          <img src="/images/ic_副驾驶阅读灯.png" class="li_ico" />
          <p class="veh_txt">副驾驶阅读灯</p>
        </div>
        <div class="LighBox_B">
          <img src="/images/ic_主驾驶阅读灯.png" class="li_ico" />
          <p class="veh_txt">阅读灯总开关</p>
        </div>
      </div>
    </div>
    <div
      class="remoteControl"
      v-drag.offset.clamp
      v-if="state.current == 6"
      @mouseenter="mouseenter"
      @mouseleave="mouseleave"
    >
      <div class="veh_tit" drag-trigger>
        <span> 遥控器 </span>
        <close-outlined class="ico_close_rem" @click="close_btn" />
      </div>
      <div
        class="otherList"
        @click="REMDoorLocking"
        :class="
          statComponen.Default.StatusConfigs.value.get(
            ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_REMOTEKEY_LOCK
          ) == 'Selected'
            ? 'Selected'
            : ' '
        "
      >
        <img src="/images/ic_车门落锁.png" class="Lim_ico" />
        <p class="veh_txt">车辆落锁</p>
      </div>
      <div
        class="otherList"
        @click="REMDoorUnlocking"
        :class="
          statComponen.Default.StatusConfigs.value.get(
            ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_REMOTEKEY_UNLOCK
          ) == 'Selected'
            ? 'Selected'
            : ' '
        "
      >
        <img src="/images/ic_车门解锁.png" class="Lim_ico" />
        <p class="veh_txt">车辆解锁</p>
      </div>
      <div class="otherList" @click="REMtrunkLid">
        <img src="/images/ic_行李箱开关.png" class="Lim_ico" />
        <p class="veh_txt">行李箱开关</p>
      </div>
    </div>
    <div
      class="OtherControls"
      v-drag.offset.clamp
      v-if="state.current == 7"
      @mouseenter="mouseenter"
      @mouseleave="mouseleave"
    >
      <div class="veh_tit" drag-trigger>
        <span> 其它控制 </span>
        <close-outlined class="ico_close" @click="close_btn" />
      </div>
      <div
        class="otherList"
        @click="DoorLocking"
        v-if="
          statComponen.Default.StatusConfigs.value.get(
            ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_REMOTEKEY_LOCK
          ) != 'Disabled'
        "
        :class="
          statComponen.Default.StatusConfigs.value.get(
            ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_REMOTEKEY_LOCK
          ) == 'Selected'
            ? 'Selected'
            : ' '
        "
      >
        <img src="/images/ic_车门落锁.png" class="Lim_ico" />
        <p class="veh_txt">车门落锁</p>
      </div>
      <div
        class="otherList"
        @click="DoorUnlocking"
        v-if="
          statComponen.Default.StatusConfigs.value.get(
            ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_REMOTEKEY_UNLOCK
          ) != 'Disabled'
        "
        :class="
          statComponen.Default.StatusConfigs.value.get(
            ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_REMOTEKEY_UNLOCK
          ) == 'Selected'
            ? 'Selected'
            : ' '
        "
      >
        <img src="/images/ic_车门解锁.png" class="Lim_ico" />
        <p class="veh_txt">车门解锁</p>
      </div>
      <div
        class="otherList"
        @click="CarHood"
        v-if="
          statComponen.Default.StatusConfigs.value.get(
            ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_HOOD_SWITCH
          ) != 'Disabled'
        "
        :class="
          statComponen.Default.StatusConfigs.value.get(
            ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_HOOD_SWITCH
          ) == 'Selected'
            ? 'Selected'
            : ' '
        "
      >
        <img src="/images/ic_机舱开关.png" class="Lim_ico" />
        <p class="veh_txt">机舱开关</p>
      </div>
      <div
        class="otherList"
        @click="trunkLid"
        v-if="
          statComponen.Default.StatusConfigs.value.get(
            ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_TRUNK_SWITCH
          ) != 'Disabled'
        "
        :class="
          statComponen.Default.StatusConfigs.value.get(
            ObjectControllerCode.Default.MsgCodesList.APPEARENCE_UI_TRUNK_SWITCH
          ) == 'Selected'
            ? 'Selected'
            : ' '
        "
      >
        <img src="/images/ic_行李箱开关.png" class="Lim_ico" />
        <p class="veh_txt">行李箱开关</p>
      </div>
      <div
        class="otherList"
        @click="CloseCarHood"
        v-if="
          statComponen.Default.StatusConfigs.value.get(
            ObjectControllerCode.Default.MsgCodesList.TRUNK_CLOSE_SWITCH
          ) != 'Disabled'
        "
        :class="
          statComponen.Default.StatusConfigs.value.get(
            ObjectControllerCode.Default.MsgCodesList.TRUNK_CLOSE_SWITCH
          ) == 'Selected'
            ? 'Selected'
            : ' '
        "
      >
        <img src="/images/ic_行李箱开关.png" class="Lim_ico" />
        <p class="veh_txt">行李箱盖关闭</p>
      </div>
      <div
        class="otherList"
        @click="MHCarHood"
        v-if="
          statComponen.Default.StatusConfigs.value.get(
            ObjectControllerCode.Default.MsgCodesList.TRUNK_MACHINERY_SWITCH
          ) != 'Disabled'
        "
        :class="
          statComponen.Default.StatusConfigs.value.get(
            ObjectControllerCode.Default.MsgCodesList.TRUNK_MACHINERY_SWITCH
          ) == 'Selected'
            ? 'Selected'
            : ' '
        "
      >
        <img src="/images/ic_行李箱开关.png" class="Lim_ico" />
        <p class="veh_txt">行李箱机械拉锁</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  reactive,
  ref,
  toRefs,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onUnmounted,
  StyleValue,
} from "vue";
import { CloseOutlined } from "@ant-design/icons-vue";
import ObjectControllerCode from "../ObjectControllerCode";
import { ClientMessage } from "@runtime/generate/message/ClientMessage";
import WebSocketComponent from "@runtime/module/WebSocket/WebSocketComponent";
import { Message } from "protobufjs/dist/protobuf";
import MessageCode from "../MessageCode";
import statComponen from "../StateCode";
import HomeContent from "../HomeContent";

const steeringWheel = ref("0");

const state = reactive({
  current: 0,
  types: true,
  Gear: "P",
  tabTypes: 0,
  LinetabTypes: 0,
});

function mouseenter() {
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisDisplayUIMenuRequest(HomeContent.Default.tip.value)
  );
  HomeContent.Default.tip.value = false;
}
function mouseleave() {
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisDisplayUIMenuRequest(HomeContent.Default.tip.value)
  );
  HomeContent.Default.tip.value = true;
}
const Radiovalue = ref<number>(1);
const value1 = ref<number>(0);
const value2 = ref<number>(0);
const checked = ref<boolean>(false);
// const value3 = ref<[number, number]>([0, 0]);
const value3 = ref<number>(0);
const timer = ref(); // 定时器
function switchBtn() {
  state.types = !state.types;
}
function cur_btn(index: number) {
  state.current = index;
}
function v1change(val: any) {
  console.log("val", val);

  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.ACCELERATOR_PEDAL,
    Content: `${val}`,
  };
  MessageMethod(newArr);
}
function v2change(val: any) {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.BRAKE_PEDAL,
    Content: `${val}`,
  };
  MessageMethod(newArr);
}
function v3change(val: any) {
  // function onAfterChange(val: any) {
  console.log("val", val);

  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.STEERING_WHEEL,
    // Content: `${Math.trunc(val / 5.4)}`,
    Content: `${Math.trunc(val)}`,
  };
  MessageMethod(newArr);
}

function YJQD() {
  let newArr = { Id: ObjectControllerCode.Default.MsgCodesList.START, Content: "" };
  MessageMethod(newArr);
}
function DZZC() {
  let newArr = { Id: ObjectControllerCode.Default.MsgCodesList.PARKING, Content: "" };
  MessageMethod(newArr);
}
function GearBtn(index: string) {
  state.Gear = index;
  let newArr = { Id: ObjectControllerCode.Default.MsgCodesList.Gears, Content: index };
  MessageMethod(newArr);
}
function horn(val: any) {
  let newArr = { Id: ObjectControllerCode.Default.MsgCodesList.TRUMPET, Content: val };
  MessageMethod(newArr);
}
function carWindowLock() {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.LOCK_CAR_WINDOW,
    Content: "",
  };
  MessageMethod(newArr);
}
function close_btn() {
  state.current = 0;
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisDisplayUIMenuRequest(false)
  );
  HomeContent.Default.tip.value = true;
}
function TabBtn(val: number) {
  state.tabTypes = val;
}
function LineTabBtn(val: number) {
  state.LinetabTypes = val;
}
function MessageMethod(Arr: any) {
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisAdapterMessage(
      MessageCode.Default.MsgCodesList.DISASSEMBLY_OBJECT_VEHICLE_CONTROLLER,
      JSON.stringify(Arr)
    )
  );
}
function ArrowClick(val: string) {
  let newArr = { Id: 0, Content: "Press" };
  if (val == "UL") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.WINDOW_MAIN_LFU;
    MessageMethod(newArr);
  } else if (val == "DL") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.WINDOW_MAIN_LFD;
    MessageMethod(newArr);
  } else if (val == "UR") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.WINDOW_MAIN_RFU;
    MessageMethod(newArr);
  } else if (val == "DR") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.WINDOW_MAIN_RFD;
    MessageMethod(newArr);
  } else if (val == "AUL") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.WINDOW_MAIN_LBU;
    MessageMethod(newArr);
  } else if (val == "ADL") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.WINDOW_MAIN_LBD;
    MessageMethod(newArr);
  } else if (val == "AUR") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.WINDOW_MAIN_RBU;
    MessageMethod(newArr);
  } else if (val == "ADR") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.WINDOW_MAIN_RBD;
    MessageMethod(newArr);
  } else if (val == "PUR") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.WINDOW_RFU;
    MessageMethod(newArr);
  } else if (val == "PDR") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.WINDOW_RFD;
    MessageMethod(newArr);
  } else if (val == "PAUL") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.WINDOW_LBU;
    MessageMethod(newArr);
  } else if (val == "PADL") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.WINDOW_LBD;
    MessageMethod(newArr);
  } else if (val == "PAUR") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.WINDOW_RBU;
    MessageMethod(newArr);
  } else if (val == "PADR") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.WINDOW_RBD;
    MessageMethod(newArr);
  }
}
function ArrowRelease(val: string) {
  let newArr = { Id: 0, Content: "Release" };
  if (val == "UL") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.WINDOW_MAIN_LFU;
    MessageMethod(newArr);
  } else if (val == "DL") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.WINDOW_MAIN_LFD;
    MessageMethod(newArr);
  } else if (val == "UR") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.WINDOW_MAIN_RFU;
    MessageMethod(newArr);
  } else if (val == "DR") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.WINDOW_MAIN_RFD;
    MessageMethod(newArr);
  } else if (val == "AUL") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.WINDOW_MAIN_LBU;
    MessageMethod(newArr);
  } else if (val == "ADL") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.WINDOW_MAIN_LBD;
    MessageMethod(newArr);
  } else if (val == "AUR") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.WINDOW_MAIN_RBU;
    MessageMethod(newArr);
  } else if (val == "ADR") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.WINDOW_MAIN_RBD;
    MessageMethod(newArr);
  } else if (val == "PUR") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.WINDOW_RFU;
    MessageMethod(newArr);
  } else if (val == "PDR") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.WINDOW_RFD;
    MessageMethod(newArr);
  } else if (val == "PAUL") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.WINDOW_LBU;
    MessageMethod(newArr);
  } else if (val == "PADL") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.WINDOW_LBD;
    MessageMethod(newArr);
  } else if (val == "PAUR") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.WINDOW_RBU;
    MessageMethod(newArr);
  } else if (val == "PADR") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.WINDOW_RBD;
    MessageMethod(newArr);
  }
}
function DoorLocking() {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.LOCK_CAR_DOOR,
    Content: "",
  };
  MessageMethod(newArr);
}
function DoorUnlocking() {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.UNLOCK_CAR_DOOR,
    Content: "",
  };
  MessageMethod(newArr);
}
function REMDoorLocking() {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.REMOTEKEY_LOCK,
    Content: "",
  };
  MessageMethod(newArr);
}
function REMDoorUnlocking() {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.REMOTEKEY_UNLOCK,
    Content: "",
  };
  MessageMethod(newArr);
}
function CarHood() {
  let newArr = { Id: ObjectControllerCode.Default.MsgCodesList.HOOD_SWITCH, Content: "" };
  MessageMethod(newArr);
}
function trunkLid() {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.TRUNK_SWITCH,
    Content: "",
  };
  MessageMethod(newArr);
}
function REMtrunkLid() {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.REMOTEKEY_TRUNKLID_UNLOCK,
    Content: "",
  };
  MessageMethod(newArr);
}
function highBeam() {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.LIGHT_HEAD_DISTANCE,
    Content: "",
  };
  MessageMethod(newArr);
}
function LowBeam() {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.LIGHT_HEAD_NEAR,
    Content: "",
  };
  MessageMethod(newArr);
}
function flashLight(val: any) {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.LIGHT_HEAD_FLASH,
    Content: val,
  };
  MessageMethod(newArr);
}
function LEFT() {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.LIGHT_TURN_LEFT,
    Content: "",
  };
  MessageMethod(newArr);
}
function RightTurn() {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.LIGHT_TURN_RIGHT,
    Content: "",
  };
  MessageMethod(newArr);
}
function automatic() {
  let newArr = { Id: ObjectControllerCode.Default.MsgCodesList.LIGHT_AUTO, Content: "" };
  MessageMethod(newArr);
}
function offmatic() {
  let newArr = { Id: ObjectControllerCode.Default.MsgCodesList.LIGHT_OFF, Content: "" };
  MessageMethod(newArr);
}
function led() {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.LIGHT_LAMPLET_SWITCH,
    Content: "",
  };
  MessageMethod(newArr);
}
function headlight() {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.LIGHT_HEADLAMP_SWITCH,
    Content: "",
  };
  MessageMethod(newArr);
}
function fogLamp() {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.LIGHT_FRONT_FOG,
    Content: "",
  };
  MessageMethod(newArr);
}
function RearFogLights() {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.LIGHT_REAR_FOG,
    Content: "",
  };
  MessageMethod(newArr);
}
function WiperOnce() {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.WIPER_FRONT_ONCE,
    Content: "",
  };
  MessageMethod(newArr);
}
function WiperOFF() {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.WIPER_FRONT_CLSOE,
    Content: "",
  };
  MessageMethod(newArr);
}
function WiperINT() {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.WIPER_FRONT_INTERVAL,
    Content: "",
  };
  MessageMethod(newArr);
}
function WiperLOW() {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.WIPER_FRONT_LOW,
    Content: "",
  };
  MessageMethod(newArr);
}
function WiperHIGH() {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.WIPER_FRONT_HIGHT,
    Content: "",
  };
  MessageMethod(newArr);
}
function waterSpray(val: any) {
  if (val == "close") {
    let newArr = {
      Id: ObjectControllerCode.Default.MsgCodesList.WIPER_FRONT_SPRAY,
      Content: "Release",
    };
    MessageMethod(newArr);
  }
  if (val == "open") {
    let newArr = {
      Id: ObjectControllerCode.Default.MsgCodesList.WIPER_FRONT_SPRAY,
      Content: "Press",
    };
    MessageMethod(newArr);
  }
}
function leftMirror() {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.REARVIEW_MIRROR_ACTIVATE_LEFT,
    Content: "",
  };
  MessageMethod(newArr);
}
function offMirror() {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.REARVIEW_MIRROR_ACTIVATE_OFF,
    Content: "",
  };
  MessageMethod(newArr);
}
function rightMirror() {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.REARVIEW_MIRROR_ACTIVATE_RIGHT,
    Content: "",
  };
  MessageMethod(newArr);
}
function heatMirror() {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.REARVIEW_MIRROR_HEATER,
    Content: "",
  };
  MessageMethod(newArr);
}
function foldMirror() {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.REARVIEW_MIRROR_FOLD,
    Content: "",
  };
  MessageMethod(newArr);
}
function CloseCarHood() {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.TRUNK_CLOSE_SWITCH,
    Content: "",
  };
  MessageMethod(newArr);
}
function MHCarHood() {
  let newArr = {
    Id: ObjectControllerCode.Default.MsgCodesList.TRUNK_MACHINERY_SWITCH,
    Content: "",
  };
  MessageMethod(newArr);
}
function mirrorRelease(val: any) {
  let newArr = { Id: 0, Content: "Release" };
  if (val == "MU") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.REARVIEW_MIRROR_ADJUST_UP;
    MessageMethod(newArr);
  } else if (val == "MD") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.REARVIEW_MIRROR_ADJUST_DOWN;
    MessageMethod(newArr);
  } else if (val == "ML") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.REARVIEW_MIRROR_ADJUST_LEFT;
    MessageMethod(newArr);
  } else if (val == "MR") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.REARVIEW_MIRROR_ADJUST_RIGHT;
    MessageMethod(newArr);
  }
}
function mirrorClick(val: any) {
  let newArr = { Id: 0, Content: "Press" };
  if (val == "MU") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.REARVIEW_MIRROR_ADJUST_UP;
    MessageMethod(newArr);
  } else if (val == "MD") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.REARVIEW_MIRROR_ADJUST_DOWN;
    MessageMethod(newArr);
  } else if (val == "ML") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.REARVIEW_MIRROR_ADJUST_LEFT;
    MessageMethod(newArr);
  } else if (val == "MR") {
    newArr.Id = ObjectControllerCode.Default.MsgCodesList.REARVIEW_MIRROR_ADJUST_RIGHT;
    MessageMethod(newArr);
  }
}
onMounted(async () => {
  let newArr: any = await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DiagnosisAdapterRequest(
      MessageCode.Default.MsgCodesList.VEHICLE_OPERATION_INIT_CONFIG
    )
  );
  console.log(JSON.parse(newArr.Content).Result);
  HomeContent.Default.vehicleControl.value = JSON.parse(newArr.Content).Result;
  console.log(
    "HomeContent.Default.vehicleControl.value111111: ",
    HomeContent.Default.vehicleControl.value
  );
});
</script>

<style scoped>
.ml_20 {
  margin-left: 20px;
}

.Operations_wp {
  width: 206px;
  /* height: 498px; */
  background: #ffffff;
  border-radius: 16px 16px 16px 16px;
  position: absolute;
  left: 20px;
  top: 74px;
  box-shadow: 0 0 20px #666;
}

.oper_tit {
  font-size: 14px;
  font-weight: 400;
  color: #202020;
  margin-top: 18px;
}

.retract_ico {
  width: 24px;
  margin-left: 10px;
  margin-right: 4px;
  margin-top: -4px;
}

.munuList {
  width: 186px;
  height: 48px;
  border-radius: 10px 10px 10px 10px;
  line-height: 46px;
  font-size: 14px;
  font-weight: 500;
  color: #000000;
  margin-left: 10px;
  margin-top: 12px;
}

.menu_ico {
  width: 24px;
  margin-left: 12px;
  margin-right: 6px;
  margin-top: -4px;
}

.current {
  font-weight: 600;
  background: linear-gradient(
    90deg,
    rgba(155, 251, 78, 0.2) 0%,
    rgba(155, 251, 78, 0.12) 58%,
    rgba(155, 251, 78, 0) 100%
  );
}

.expand_wp {
  width: 84px;
  /* height: 498px; */
  background: #ffffff;
  border-radius: 16px 16px 16px 16px;
  position: absolute;
  left: 20px;
  top: 74px;
  box-shadow: 0 0 20px #666;
}

.ex_munuList {
  width: 64px;
  height: 48px;
  border-radius: 10px 10px 10px 10px;
  margin-left: 10px;
  text-align: center;
  margin-top: 12px;
  line-height: 42px;
}

.VehicleControl {
  position: absolute;
  width: 340px;
  height: 695px;
  background: #ffffff;
  border-radius: 10px;
  opacity: 1;
  top: 424px;
  left: 400px;
  box-shadow: 0 0 20px #666;
  transform: translate(-50%, -50%);
}

.veh_tit {
  height: 75px;
  width: 100%;
  font-size: 20px;
  font-weight: 600;
  color: #202020;
  line-height: 70px;
  border-bottom: 1px solid #f0f0f0;
  padding-left: 20px;
}

.ico_close {
  margin-left: 186px;
}

.veh_content {
  position: relative;
}

.buttonStart {
  width: 140px;
  height: 100px;
  position: absolute;
  top: 20px;
  left: 20px;
  text-align: center;
}

.veh_txt {
  font-size: 12px;
  font-weight: 400;
  color: #5e5e5e;
  margin: 8px;
}

.be {
  background: #f8f8f8;
  border-radius: 18px 18px 18px 18px;
}

.veh_ico {
  width: 36px;
  margin-top: 16px;
  margin-bottom: 10px;
}

.swh {
  width: 64px;
  height: 64px;
  margin: 0 auto;
  background-image: url("/images/ic_方向盘_off.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.swh:hover {
  background-image: url("/images/ic_方向盘_喇叭 on.png");
}

.parking {
  width: 140px;
  height: 100px;
  position: absolute;
  top: 20px;
  right: 20px;
  text-align: center;
}

.shift {
  width: 300px;
  height: 100px;
  position: absolute;
  left: 20px;
  top: 140px;
}

.s_l {
  width: 124px;
  height: 100%;
  float: left;
  border-right: 1px solid #ebe7e7;
  text-align: center;
}

.s_r {
  width: 167px;
  height: 100%;
  float: left;
  text-align: center;
  padding-top: 20px;
}

.shs {
  font-size: 26px;
  padding: 10px;
  padding-bottom: 0;
  font-weight: 600;
  color: rgba(176, 176, 176, 1);
}

.currShs {
  color: #000;
}

.Acc {
  top: 260px;
}

.brake {
  top: 380px;
}

.steering {
  top: 500px;
}

.bg_line {
  width: 136px;
  margin-top: 20px;
}

.sliderOne {
  width: 136px;
  position: absolute;
  right: 20px;
  top: 32.5px;
}

.sliderTwo {
  width: 136px;
  position: absolute;
  right: 20px;
  top: 32.5px;
}

.sliderThree {
  width: 136px;
  position: absolute;
  right: 20px;
  top: 32.5px;
}

:deep().ant-slider-track {
  background-color: #000;
}

:deep().ant-slider:hover .ant-slider-track {
  background-color: #000;
}

:deep().sliderOne .ant-slider-handle {
  width: 30px;
  height: 30px;
  margin-top: -13px;
  background-image: url("/images/bt_制动踏板.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

:deep().sliderTwo .ant-slider-handle {
  width: 30px;
  height: 30px;
  margin-top: -13px;
  background-image: url("/images/bt_制动踏板.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

:deep().sliderThree .ant-slider-handle {
  width: 30px;
  height: 30px;
  margin-top: -13px;
  background-image: url("/images/bt_方向盘_2.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

:deep().ant-slider-rail {
  background-color: rgba(232, 232, 232, 1);
}

:deep().s .ant-slider-handle-2 {
  display: none !important;
}

:deep().b .ant-slider-handle-1 {
  display: none !important;
}

.horn {
  width: 24px;
  position: absolute;
  right: 12px;
  top: 12px;
}

.WindowControl {
  position: absolute;
  width: 340px;
  height: 620px;
  background: #ffffff;
  border-radius: 10px;
  opacity: 1;
  top: 387px;
  left: 400px;
  box-shadow: 0 0 20px #666;
  transform: translate(-50%, -50%);
}

.lightingControl {
  position: absolute;
  width: 340px;
  height: 540px;
  background: #ffffff;
  border-radius: 10px;
  opacity: 1;
  top: 347px;
  left: 400px;
  box-shadow: 0 0 20px #666;
  transform: translate(-50%, -50%);
}

.tabBox {
  width: 100%;
  height: 56px;
  border-bottom: 1px solid #f0f0f0;
}

.tab_li {
  height: 56px;
  font-size: 16px;
  font-weight: 500;
  color: #b0b0b0;
  float: left;
  line-height: 56px;
  margin: 0 20px;
}

.Linetab_li {
  height: 56px;
  font-size: 16px;
  font-weight: 500;
  color: #b0b0b0;
  float: left;
  line-height: 56px;
  margin: 0 20px;
  margin-right: 3px;
}

.tab_sele {
  font-weight: 600;
  color: #000;
  border-bottom: 2px solid #000;
}

.winConBox {
  position: relative;
  padding: 10px;
  overflow: hidden;
}

.WindowControlBox {
  width: 140px;
  height: 154px;
  background: #f8f8f8;
  border-radius: 18px 18px 18px 18px;
  margin: 10px;
  float: left;
  text-align: center;
  color: #5e5e5e;
}

.downArrow {
  width: 20px;
  height: 20px;
  margin-top: 10px;
  margin-left: 60px;
  margin-bottom: 16px;
  background-image: url("/images/ic_arrow_down (2).png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.downArrow:hover {
  background-image: url("/images/ic_arrow_down.png");
}

.upArrow {
  width: 20px;
  height: 20px;
  margin-top: 10px;
  margin-left: 60px;
  margin-bottom: 10px;
  background-image: url("/images/ic_arrow_up.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.upArrow:hover {
  background-image: url("/images/ic_arrow_up(1).png");
}

.carWindow {
  width: 36px;
}

.windowLock {
  width: 300px;
  height: 100px;
  background: #f8f8f8;
  border-radius: 18px 18px 18px 18px;
  float: left;
  margin-left: 10px;
  margin-top: 9px;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  color: #5e5e5e;
}

.lock_ico {
  margin-top: 20px;
  margin-bottom: 10px;
}

.bgNone {
  background: transparent;
}

.RearviewMirrorControl {
  position: absolute;
  width: 340px;
  height: 511px;
  background: #ffffff;
  border-radius: 10px;
  opacity: 1;
  top: 332px;
  left: 400px;
  box-shadow: 0 0 20px #666;
  transform: translate(-50%, -50%);
}

.WiperControl {
  position: absolute;
  width: 340px;
  height: 325px;
  background: #ffffff;
  border-radius: 10px;
  opacity: 1;
  top: 239px;
  left: 400px;
  box-shadow: 0 0 20px #666;
  transform: translate(-50%, -50%);
}

.OtherControls {
  position: absolute;
  width: 340px;
  height: 450px;
  background: #ffffff;
  border-radius: 10px;
  opacity: 1;
  top: 302px;
  left: 400px;
  box-shadow: 0 0 20px #666;
  transform: translate(-50%, -50%);
}

.remoteControl {
  position: absolute;
  width: 175px;
  height: 455px;
  background: #ffffff;
  border-radius: 10px;
  opacity: 1;
  top: 304px;
  left: 317px;
  box-shadow: 0 0 20px #666;
  transform: translate(-50%, -50%);
}

.RearViewContent {
  position: relative;
  padding-left: 14px;
  margin-top: 14px;
}

.RVCBox {
  width: 90px;
  height: 72px;
  border: 1px solid #f0f0f0;
  border-radius: 16px;
  margin: 7px;
  float: left;
  text-align: center;
}

.RVCBox:hover {
  background: linear-gradient(
    180deg,
    rgba(206, 240, 114, 0.5) 0%,
    rgba(206, 240, 114, 0) 100%
  );
  border: 2px solid #9bfb4e;
}

.edge {
  background: linear-gradient(
    180deg,
    rgba(206, 240, 114, 0.5) 0%,
    rgba(206, 240, 114, 0) 100%
  );
  border: 2px solid #9bfb4e;
}

.rcv_ico {
  width: 24px;
  margin-top: 12px;
}

.OperationPanel {
  position: relative;
}

.OP_ico {
  width: 144px;
  margin-left: 85px;
  margin-top: 33px;
}

.seta_t {
  width: 24px;
  position: absolute;
  top: 44px;
  left: 146px;
}

.seta_t:hover {
  transform: scale(1.2);
}

.longo {
  margin-left: 166px;
}

.setab {
  top: 136px;
}

.setal {
  top: 92px;
  left: 100px;
}

.setar {
  top: 92px;
  left: 194px;
}

.aquecimentoBox,
.ColapsoBox {
  width: 140px;
  height: 100px;
  background: #f8f8f8;
  border-radius: 18px 18px 18px 18px;
  float: left;
  margin: 20px 10px;
  margin-right: 6px;
  text-align: center;
}

.er:hover {
  background: linear-gradient(
    180deg,
    rgba(206, 240, 114, 0.5) 0%,
    rgba(206, 240, 114, 0) 100%
  );
}

.er_ico {
  width: 36px;
  margin-top: 16px;
  margin-bottom: 6px;
}

.RVC {
  overflow: hidden;
}

.LimpadorList {
  width: 90px;
  height: 90px;
  border: 1px solid #f0f0f0;
  border-radius: 16px;
  margin-top: 20px;
  margin-right: 15px;
  text-align: center;
  float: left;
}

.LimpadorList:hover {
  background: linear-gradient(
    180deg,
    rgba(206, 240, 114, 0.5) 0%,
    rgba(206, 240, 114, 0) 100%
  );
  border: 2px solid #9bfb4e;
}

.Lim_ico {
  width: 36px;
  margin: 16px;
  margin-bottom: 2px;
}

.Liminterruptor_box {
  float: left;
  width: 140px;
  height: 100px;
  background: #f8f8f8;
  border-radius: 16px;
  margin-left: 20px;
  margin-top: 20px;
  padding-top: 20px;
}

.tac {
  text-align: center;
}

:deep().ant-switch {
  margin-top: 16px;
}

:deep().ant-switch-checked {
  background: #000;
}

:deep().ant-radio-checked .ant-radio-inner {
  border-color: #000;
}

:deep().ant-radio-inner::after {
  background-color: #000;
}

:deep().ant-radio-wrapper {
  margin-bottom: 16px;
  margin-left: 20px;
}

.LightBox {
  width: 90px;
  height: 100px;
  background: #f8f8f8;
  border-radius: 18px 18px 18px 18px;
  float: left;
  margin: 8px;
  text-align: center;
}

.LightBox:hover {
  background: linear-gradient(
    180deg,
    rgba(206, 240, 114, 0.5) 0%,
    rgba(206, 240, 114, 0) 100%
  );
}

.LighBox_B {
  width: 140px;
  height: 100px;
  background: #f8f8f8;
  border-radius: 18px 18px 18px 18px;
  float: left;
  margin: 8px;
  margin-right: 12px;
  text-align: center;
}

.LighBox_B:hover {
  background: linear-gradient(
    180deg,
    rgba(206, 240, 114, 0.5) 0%,
    rgba(206, 240, 114, 0) 100%
  );
}

.li_ico {
  width: 36px;
  margin-top: 16px;
  margin-bottom: 6px;
}

.SunroofSwitch {
  width: 90px;
  height: 220px;
  background: #f8f8f8;
  border-radius: 18px 18px 18px 18px;
  float: left;
  margin: 8px;
  text-align: center;
}

.SunroofSwitch:hover {
  /* background: linear-gradient(180deg, rgba(206, 240, 114, 0.5) 0%, rgba(206, 240, 114, 0) 100%); */
}

.sun_ico {
  width: 36px;
  margin-top: 75px;
  margin-bottom: 6px;
}

.llc {
  position: absolute;
  left: 10px;
  bottom: 15px;
}

.otherList {
  width: 135px;
  height: 100px;
  background: #f8f8f8;
  border-radius: 18px 18px 18px 18px;
  float: left;
  text-align: center;
  margin-top: 16px;
  margin-left: 22px;
}

.otherList:hover {
  background: linear-gradient(
    180deg,
    rgba(206, 240, 114, 0.5) 0%,
    rgba(206, 240, 114, 0) 100%
  );
}

.Selected {
  background: linear-gradient(
    180deg,
    rgba(206, 240, 114, 0.5) 0%,
    rgba(206, 240, 114, 0) 100%
  );
}

.off {
  color: #000;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0;
  margin-top: 12px;
}

.ico_close_rem {
  margin-left: 54px;
}

.shs_img {
  width: 30px;
}

.one {
  position: absolute;
  right: 20px;
  bottom: 0px;
  color: #000;
}

.zero {
  position: absolute;
  right: 155px;
  bottom: 0px;
  color: #000;
}

.wubaisi {
  position: absolute;
  right: 135px;
  bottom: 0px;
  color: #000;
}
</style>
